<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>国内外天气预报</title>
<link rel="stylesheet" href="css/lrtk.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo-1.3.3.js" type="text/javascript"></script>
<script src="js/jquery.localscroll-1.2.5.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.serialScroll-1.2.1.js" type="text/javascript" charset="utf-8"></script>
<script src="js/coda-slider.js" type="text/javascript" charset="utf-8"></script>
</head>
<script type="text/javascript">
function weather(){
	$.ajax({
		type : "GET",
		url : "<%=request.getContextPath()%>/RequestWeatherServlet?",
		dataType : "text",
		success : function(data) {

				
		},
		error : function() {
			alert("网络连接出错！");
		}
	});
}

</script>
<script type="text/javascript">
  function city(){
		$.ajax({
			type : "POST",
			url : "<%=request.getContextPath()%>/RequestWeatherServlet",
			dataType : "text",
			async:false,
			success : function(data) {
				data = data.replace("[","").replace("]","");
				var citys = data.split(",");
				cityImage(citys[0]);
				/* var content = "";
 				var cityData=data.split(",");
				session.setAttribute("cityData",cityData);
				$.each(cityData,function(i, city) {
					
					content += "<li>"+city.data+"</li>";
				});
				$(".city li").click(function(){
					$(".city li").attr("style","");
					$(this).attr("style","background-color:#00ff00;");
				});
				$(".city li").eq(0).attr("style","background-color:#00ff00;"); */
			},
			error : function() {
				alert("网络连接出错！");
			}
		});
  }
 
</script>
<script type="text/javascript">

function cityImage(city){
	$.ajax({
		type : "POST",
		url : "<%=request.getContextPath()%>/RequestWeatherCityChart?city="+city,
		dataType : "text",
		async:false,
		success : function(data) {
			$("#cityImg").attr("src",data);
		},
		error : function() {
			alert("网络连接出错！");
		}
	});
}


</script>

<body onload="weather()">
        <div id="slider">    
            <ul class="navigation">
                <li><a href="coda-slider.html#beijing">北京</a></li>
                <li><a href="coda-slider.html#city" onclick="city()">国外天气</a></li>
            </ul>
            <div class="scroll">
                <div class="scrollContainer">
                <div class="panel" id="beijing"><h2>天气预报</h2>
                <h1>${datetime}</h1>
                <h1>${dwind}</h1>            
                <img src="${file1}" width="20" height="40"> 
                <img src="${file2}"  width="20" height="40"> 
                <img src="Resources/c.png"  width="20" height="40">
                <%-- <img src="<%=application.getRealPath("/WEB-INF/Resources")%>\"${file1} width="40" height="60"> 
                <img src="<%=application.getRealPath("/WEB-INF/Resources")%>\"${file2}  width="40" height="60"> 
                <img src="<%=application.getRealPath("/WEB-INF/Resources")%>\c.png"  width="40" height="60">  --%>
                </div>
                <div class="panel" id="city"><h2>国外天气</h2>     
				<%-- <table class="table table-bordered table-hover">
				<tr>
                <c:forEach items="${cityList}" var="item" >
					<td>${item}
						
					</td>
					</c:forEach>
			    </tr>
                </table> --%>
                <c:forEach items="${cityList}" var="item1" >
                <a href="index.jsp#city" onclick="cityImage('${item1}')">${item1}</a>
                </c:forEach>
                <p></p><p></p>
                <img id="cityImg" src="${cityfile}" /> 
                </div>

                </div>
            </div>

            <div id="shade"></div>
        </div>

</body>
</html>